import React, { Component } from 'react';
import {
    Text, Image, View, ToastAndroid, PixelRatio, ScrollView, TouchableOpacity,AppRegistry,FlatList
} from 'react-native';
import TestFunctionUtils from '../util/TestFunctionUtils';

import Head from './layout/Head';
import styles from '../../assets/css/style.js';
import Glob from '../util/Global';
const rem = Glob.WIDTH/7.5;


/**
 * 测试报告页面
 */
export default class ReportView extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }
    render(){
        const lists=[["首 页","icon_in"],["分 享","icon_fx"],["测试功能","icon_cs"],["状态查看","icon_ck"],["设 置","icon_sz"]];
        return (
            <View style={[styles.flex,styles.bgcolor]}>
                <Head title="测试报告" list={lists}> </Head>
                <View style={styles.flex}>
                    <ScrollView style={styles.ztScroll}>
                        <View style={styles.Ptwrap}>
                            <TouchableOpacity activeOpacity={1}  onPress={() => ToastAndroid.show('一键诊断功能', ToastAndroid.SHORT)}>
                                <View style={styles.ptBox}>
                                    <View style={[styles.PtIconWrap,styles.ptImagWrap,{marginRight:.3*rem}]}>
                                        <Image
                                            style={styles.PtIcon_imag}
                                            resizeMode="contain"
                                            source={require('../../assets/img/icon_pt.png')}
                                        />
                                        <Text style={styles.Pticon_font}>68分</Text>
                                        <Text style={styles.Pticon_fontmin}>测试前</Text>
                                    </View>
                                    <View style={[styles.PtIconWrap,styles.ptImagWrap]}>
                                        <Image
                                            style={styles.PtIcon_imag}
                                            resizeMode="contain"
                                            source={require('../../assets/img/icon_pt.png')}
                                        />
                                        <Text style={styles.Pticon_font}>68分</Text>
                                        <Text style={styles.Pticon_fontmin}>测试后</Text>
                                    </View>
                                </View>

                            </TouchableOpacity>
                            <View style={styles.Pt_text}>
                                <View style={[styles.Pt_list]}>
                                    <View style={[styles.Pt_listmin]}>
                                        <Text style={styles.Pt_font}>宽带账号：</Text>
                                        <Text style={styles.Pt_font}>02002707084</Text>
                                    </View>
                                    <View style={[styles.Pt_listmin,styles.PtMaleft]}>
                                        <Text style={styles.Pt_font}>评估日期：</Text>
                                        <Text style={styles.Pt_font}>20170421 18:20</Text>
                                    </View>
                                </View>
                                <View style={[styles.Pt_list]}>
                                    <View style={[styles.Pt_listmin]}>
                                        <Text style={styles.Pt_font}>签约带宽：</Text>
                                        <Text style={styles.Pt_font}>1000M</Text>
                                    </View>
                                    <View style={[styles.Pt_listmin,styles.PtMaleft]}>
                                        <Text style={styles.Pt_font}>评估人：</Text>
                                        <Text style={styles.Pt_font}>test001</Text>
                                    </View>
                                </View>

                            </View>
                        </View>
                        <View style={styles.ztListAll}>
                            <View style={styles.ztList_on}>
                                <Image
                                    style={styles.ztList_img}
                                    resizeMode="contain"
                                    source={require('../../assets/img/icon_xg.png')}
                                />
                                <Text style={styles.ztList_font}>测试详情</Text>
                            </View>
                            <View style={styles.pt_ctContent}>
                                <View style={styles.channeList}>
                                    <Text style={[styles.ctFontMon,styles.ctWidth]}>信号强度</Text>
                                    <Image
                                        style={styles.ctGress}
                                        resizeMode="contain"
                                        source={require('../../assets/img/gress_01.png')}
                                    />
                                    <Text style={styles.ctFontMon}>优秀</Text>
                                </View>
                                <View style={styles.channeList}>
                                    <Text style={[styles.ctFontMon,styles.ctWidth]}>加密类型</Text>
                                    <Image
                                        style={styles.ctGress}
                                        resizeMode="contain"
                                        source={require('../../assets/img/gress_02.png')}
                                    />
                                    <Text style={styles.ctFontMon}>畅通</Text>
                                </View>
                                <View style={styles.channeList}>
                                    <Text style={[styles.ctFontMon,styles.ctWidth]}>协议速率</Text>
                                    <Image
                                        style={styles.ctGress}
                                        resizeMode="contain"
                                        source={require('../../assets/img/gress_03.png')}
                                    />
                                    <Text style={styles.ctFontMon}>一般</Text>
                                </View>
                                <View style={styles.channeList}>
                                    <Text style={[styles.ctFontMon,styles.ctWidth]}>干扰</Text>
                                    <Image
                                        style={styles.ctGress}
                                        resizeMode="contain"
                                        source={require('../../assets/img/gress_04.png')}
                                    />
                                    <Text style={styles.ctFontMon}>阻塞</Text>
                                </View>
                                <View style={styles.channeList}>
                                    <Text style={[styles.ctFontMon,styles.ctWidth]}>Ping</Text>
                                    <Image
                                        style={styles.ctGress}
                                        resizeMode="contain"
                                        source={require('../../assets/img/gress_01.png')}
                                    />
                                    <Text style={styles.ctFontMon}>优秀</Text>
                                </View>
                                <View style={styles.channeList}>
                                    <Text style={[styles.ctFontMon,styles.ctWidth]}>HTTP网页</Text>
                                    <Image
                                        style={styles.ctGress}
                                        resizeMode="contain"
                                        source={require('../../assets/img/gress_01.png')}
                                    />
                                    <Text style={styles.ctFontMon}>优秀</Text>
                                </View>
                                <View style={styles.channeList}>
                                    <Text style={[styles.ctFontMon,styles.ctWidth]}>速率测试</Text>
                                    <Image
                                        style={styles.ctGress}
                                        resizeMode="contain"
                                        source={require('../../assets/img/gress_01.png')}
                                    />
                                    <Text style={styles.ctFontMon}>优秀</Text>
                                </View>
                            </View>
                        </View>
                        <View style={[styles.ztListAll,styles.tabMarTop]}>
                            <View style={styles.ztList_on}>
                                <Image
                                    style={styles.ztList_img}
                                    resizeMode="contain"
                                    source={require('../../assets/img/icon_xg.png')}
                                />
                                <Text style={styles.ztList_font}>WIFI信息</Text>
                            </View>

                            <View style={styles.tableTh}>
                                <Text style={[styles.th0101,styles.thText]}>位置</Text>
                                <Text style={[styles.th03,styles.thText]}>测试项</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工前</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工后</Text>
                            </View>
                            <View style={styles.tableTbody}>
                                <View style={styles.tabLeft}>
                                    <Text style={styles.tabLeftText}>客厅</Text>
                                </View>
                                <View style={styles.tabListWrap}>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>信号强度</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>认证方式</Text>
                                        <Text style={styles.tdText}>WPAWPA2_PSK_TKIP_AES</Text>
                                        <Text style={styles.tdText}>WPAWPA2_PSK_TKIP_AES</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>连接速率</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>标准协议</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>信道</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={[styles.ztListAll,styles.tabMarTop]}>
                            <View style={styles.ztList_on}>
                                <Image
                                    style={styles.ztList_img}
                                    resizeMode="contain"
                                    source={require('../../assets/img/icon_xg.png')}
                                />
                                <Text style={styles.ztList_font}>周边干扰</Text>
                            </View>

                            <View style={styles.tableTh}>
                                <Text style={[styles.th0101,styles.thText]}>位置</Text>
                                <Text style={[styles.th03,styles.thText]}>测试项</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工前</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工后</Text>
                            </View>
                            <View style={styles.tableTbody}>
                                <View style={styles.tabLeft}>
                                    <Text style={styles.tabLeftText}>客厅</Text>
                                </View>
                                <View style={styles.tabListWrap}>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>同频干扰</Text>
                                        <Text style={styles.tdText}>3</Text>
                                        <Text style={styles.tdText}>0</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>领频干扰</Text>
                                        <Text style={styles.tdText}>1</Text>
                                        <Text style={styles.tdText}>0</Text>
                                    </View>
                                </View>
                            </View>
                        </View>

                        <View style={[styles.ztListAll,styles.tabMarTop]}>
                            <View style={styles.ztList_on}>
                                <Image
                                    style={styles.ztList_img}
                                    resizeMode="contain"
                                    source={require('../../assets/img/icon_xg.png')}
                                />
                                <Text style={styles.ztList_font}>PING</Text>
                            </View>
                            <View style={styles.tableTh}>
                                <Text style={[styles.th0101,styles.thText]}>位置</Text>
                                <Text style={[styles.th03,styles.thText]}>测试项</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工前</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工后</Text>
                            </View>
                            <View style={styles.tableTbody}>
                                <View style={styles.tabLeft}>
                                    <Text style={styles.tabLeftText}>客厅</Text>
                                </View>
                                <View style={styles.tabListWrap}>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>丢包率</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>TTL</Text>
                                        <Text style={styles.tdText}>WPAWPA2_PSK_TKIP_AES</Text>
                                        <Text style={styles.tdText}>54</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>时延</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                </View>
                            </View>
                        </View>

                        <View style={[styles.ztListAll,styles.tabMarTop]}>
                            <View style={styles.ztList_on}>
                                <Image
                                    style={styles.ztList_img}
                                    resizeMode="contain"
                                    source={require('../../assets/img/icon_xg.png')}
                                />
                                <Text style={styles.ztList_font}>HTTP网页</Text>
                            </View>
                            <View style={styles.tableTh}>
                                <Text style={[styles.th0101,styles.thText]}>位置</Text>
                                <Text style={[styles.th03,styles.thText]}>测试项</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工前</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工后</Text>
                            </View>
                            <View style={styles.tableTbody}>
                                <View style={styles.tabLeft}>
                                    <Text style={styles.tabLeftText}>客厅</Text>
                                </View>
                                <View style={styles.tabListWrap}>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>测试时间</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>连接时延</Text>
                                        <Text style={styles.tdText}>WPAWPA2_PSK_TKIP_AES</Text>
                                        <Text style={styles.tdText}>48S</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>传输时延</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>数据长度</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>平均速率</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                </View>
                            </View>
                        </View>

                        <View style={[styles.ztListAll,styles.tabMarTop]}>
                            <View style={styles.ztList_on}>
                                <Image
                                    style={styles.ztList_img}
                                    resizeMode="contain"
                                    source={require('../../assets/img/icon_xg.png')}
                                />
                                <Text style={styles.ztList_font}>速率测试</Text>
                            </View>
                            <View style={styles.tableTh}>
                                <Text style={[styles.th0101,styles.thText]}>位置</Text>
                                <Text style={[styles.th03,styles.thText]}>测试项</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工前</Text>
                                <Text style={[styles.th01,styles.thText]}>竣工后</Text>
                            </View>
                            <View style={styles.tableTbody}>
                                <View style={styles.tabLeft}>
                                    <Text style={styles.tabLeftText}>客厅</Text>
                                </View>
                                <View style={styles.tabListWrap}>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>测试时间</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>数据长度</Text>
                                        <Text style={styles.tdText}>WPAWPA2_PSK_TKIP_AES</Text>
                                        <Text style={styles.tdText}>WPAWPA2_PSK_TKIP_AESWPAWPA2_PSK_TKIP_AES</Text>
                                    </View>
                                    <View style={styles.tabList}>
                                        <Text style={[styles.tdText,styles.th02]}>平均速率</Text>
                                        <Text style={styles.tdText}>-21dbm</Text>
                                        <Text style={styles.tdText}>-39dbm</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                        <View style={[styles.ztListAll,styles.tabMarTop,{paddingBottom:.8*rem}]}>
                            <View style={styles.ztList_01}>
                                <Image
                                    style={styles.ztList_img}
                                    resizeMode="contain"
                                    source={require('../../assets/img/icon_yh.png')}
                                />
                                <Text style={styles.ztList_font}>
                                    <Text style={[styles.ztList_font04,styles.PtMarRight]}>1 </Text>
                                    <Text>项优化建议</Text>
                                </Text>
                            </View>
                            <View style={styles.ztList_02}>
                                <Text style={[styles.ztList_font02,styles.ztList_font04]}><Text>问题：</Text>下载速度过于缓慢</Text>
                            </View>
                            <View style={styles.ztList_02}>
                                <Text style={[styles.ztList_font02]}><Text>建议：</Text>关闭后台过多的运行程序</Text>
                            </View>
                        </View>
                    </ScrollView>
                </View>

                <View title="点击查看效果图" style={[styles.CesProcess,styles.center,styles.PtWhite,{display:"none"}]}>
                    <View style={[styles.Ipwrap]}>
                        <Image
                            style={styles.Ip_Bgimg}
                            resizeMode="contain"
                            source={require('../../assets/img/bg_sp.png')}
                        />
                    </View>
                </View>

                <View title="点击分享弹出层" style={[styles.CesProcess,styles.center,{display:"none"}]}>
                    <View style={styles.PtShare}>
                        <View style={styles.PSList}>
                            <Image
                                style={styles.PSL_img}
                                resizeMode="contain"
                                source={require('../../assets/img/ps_iconYJ.png')}
                            />
                            <Text style={styles.PSFont}>发送电子邮件</Text>
                        </View>
                        <View style={styles.PSList}>
                            <Image
                                style={styles.PSL_img}
                                resizeMode="contain"
                                source={require('../../assets/img/ps_iconQQ.png')}
                            />
                            <Text style={styles.PSFont}>发送给好友</Text>
                        </View>
                        <View style={styles.PSList}>
                            <Image
                                style={styles.PSL_img}
                                resizeMode="contain"
                                source={require('../../assets/img/ps_iconWX.png')}
                            />
                            <Text style={styles.PSFont}>微信好友</Text>
                        </View>
                        <View style={styles.PSList}>
                            <Image
                                style={styles.PSL_img}
                                resizeMode="contain"
                                source={require('../../assets/img/ps_iconQZ.png')}
                            />
                            <Text style={styles.PSFont}>朋友圈</Text>
                        </View>
                        <View style={styles.PSList}>
                            <Image
                                style={styles.PSL_img}
                                resizeMode="contain"
                                source={require('../../assets/img/ps_iconQQ.png')}
                            />
                            <Text style={styles.PSFont}>发送到我的电脑</Text>
                        </View>
                        <View style={styles.PSList}>
                            <Image
                                style={styles.PSL_img}
                                resizeMode="contain"
                                source={require('../../assets/img/ps_iconZF.png')}
                            />
                            <Text style={styles.PSFont}>发送到支付宝</Text>
                        </View>
                    </View>
                </View>
            </View>
        )


    }
}
